Smart Sass

Creative HTML5 Template for Saas, Startup & Agency

Installation

Follow the steps below to get started with Smart Sass Multipurpose HTML Template  :

  1. Open the Package/Smart Sass Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
  3. Make sure you have upload the required files and folders listed below:
    • Smart Sass HTML/assets - Stylesheets, JavaScript, Fonts etc Folder 
    • Smart Sass HTML/assets/images - Images Folder  
    • Smart Sass HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now ready to go..! Start adding your Content and show off your Brand New Website.

Features At A Glance

  1. HTML5 & CSS3 & jQuery
  2. Modern And Creative Design
  3. Universal menu
  4. 100% Responsive
  5. Well documented
  6. Complete SASS files
  7. Bootstrap 4.3.1
  8. Icofont Used
  9. Fontawesome Used
  10. Google Font Used
  11. Lightcase Used
  12. Google Map
  13. Eye Catching Design
  14. W3C Valid Code

HTML Structure

Smart Sass has follows a simple coding structure. here is the sample:

 

	
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<title>Smart-Seo</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- google fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,
		500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon/seo.png">

		<link rel="stylesheet" href="assets/css/animate.css">
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/all.min.css">
		<link rel="stylesheet" href="assets/css/icofont.min.css">
		<link rel="stylesheet" href="assets/css/lightcase.css">
		<link rel="stylesheet" href="assets/css/swiper.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
	</head>

	<body>
		<!-- Mobile Menu Start Here -->
		<div class="mobile-menu seo-bg">
		<nav class="mobile-header">
		<div class="header-logo">
		<a href="index.html"><img src="assets/images/logo/sco.png" alt="logo"></a>
		</div>
		<div class="header-bar">
		<span></span>
		<span></span>
		<span></span>
		</div>
		</nav>
		<nav class="mobile-menu">
		<div class="mobile-menu-area">
		<div class="mobile-menu-area-inner">
		<ul>
		<li><a href="#">Home</a>
		<ul>
		<li class="active"><a href="index.html">Smart Seo</a></li>
		<li><a href="index-host.html">Smart Host</a></li>
		<li><a href="index-erp.html">Smart Erp</a></li>
		<li><a href="index-vpn.html">Smart Vpn</a></li>
		<li><a href="index-pos.html">Smart Pos</a></li>
		<li><a href="index-marketing.html">Smart Marketing</a></li>
		<li><a href="index-shopapp.html">Smart Shopapp</a></li>
		<li><a href="index-crypto.html">Smart Crypto</a></li>
		</ul>
		</li>
		<li><a href="#">Pages</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Shop</a></li>
		<li><a href="#">Elements</a></li>


		<div class="footer-bottom">
		<div class="container">
		<div class="section-wrapper">
		<p>&copy; 2019 All Rights Reserved. Designed by <a href="#">labartisan</a></p>
		</div>
		</div>
		</div>
		</footer>
		<!-- Footer Section Ending Here -->

		<!-- scrollToTop start here -->
		<a href="#" class="scrollToTop">
		<i class="icofont-swoosh-up"></i><span class="pluse_1"></span>
		<span class="pluse_2"></span></a>
		<!-- scrollToTop ending here -->

		<script src="assets/js/jquery.js"></script>
		<script src="assets/js/fontawesome.min.js"></script>
		<script src="assets/js/waypoints.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/wow.min.js"></script>
		<script src="assets/js/swiper.min.js"></script>
		<script src="assets/js/jquery.countdown.min.js"></script>
		<script src="assets/js/jquery.counterup.min.js"></script>
		<script src="assets/js/functions.js"></script>
	</body>
	</html>

 

CSS Structure

We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

  • Animate css used
  • Bootstrap css used
  • Lightcase used
  • Swiper used
  • Fontawesome used
  • Icofont used
  • Style.css used
  • and some other necessary css files 
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
 
 
	
 

	/*!
	Template Name: SmartSass
	Template URI: https://themeforest.net/user/codexcoder
	Author: codexcoder.com
	Author URI: https://themeforest.net/user/codexcoder
	Description: Description
	Version: 1.0.0
	Text Domain: smartsass
	Tags: app, app landing, app landing page, app landing template, App Showcase, app store, app template, app website, clean app landing, creative app landing page, gradient,
	mobile, mobile app landing page, modern app Landing, sass

	*/
	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------
	# Normalize
	# Typography
	# Global CSS
	# Header CSS
		*Style-1
		*Style-2
		*Style-3
		*Mobile Header
	# Page Header
	# Banner
		*Style-1
		*Style-2
		*Style-3
		*Style-4
		*Style-5
		*Style-6
	# Service
		*Style-1
		*Style-2
		*Style-3
		*Style-4
		*Style-5
		*Style-6
		*Style-7
		*Style-8
		*Service Single
	# About
		*Style-1
		*Style-2
		*Style-3
		*Style-4
		*Style-5
		*Style-6
		*Style-7
	# SEO Analysis
	# Recent Case
	# Pricing Table
		*Style-1
		*Style-2
		*Style-3
		*Style-4
	# Blog
		*Style-1
		*Style-2
		*Style-3
		*Style-4
		*Blog Single
	# Blog Widget
	# Clients
	# Sponsor
		*Style-1
		*Style-2
	# Newsletter
	# Transportation
	# Doming Check
	# ERP Manager
	# Shopapp Manager
	# Author Level
	# Vpn Service
	# FAQ
	# Shopapp Apps
	# App
	# Pos
	# Testimonial
		*Style-1
		*Style-2
	# Market Range
	# Portfolio
		*Style-1
		*Style-2
		* Portfolio Single
	# Team
		*Style-1
		*Style-2
		* Team Single
	# Shop Page
	# Shop Single
	# Shop Cart
	# Contact Us
	# Gmaps
	# Fore Zero Page
	--------------------------------------------------------------*/
	
 
 
 
	
 

	.mobile-menu .mobile-header {
	padding: 11px 15px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); }
	.mobile-menu .mobile-header .header-bar {
	width: 25px;
	height: 25px;
	cursor: pointer; }
	.mobile-menu .mobile-header .header-bar span {
	background: #fff;
	width: 100%;
	height: 3px;
	display: block;
	left: 0;
	top: 50%;
	margin-top: -1px;
	transform-origin: center;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.mobile-menu .mobile-header .header-bar span:nth-child(1) {
	margin-top: -9px; }
	.mobile-menu .mobile-header .header-bar span:nth-child(2) {
	opacity: 1; }
	.mobile-menu .mobile-header .header-bar span:nth-child(3) {
	margin-top: 7px; }
	.mobile-menu .mobile-header .header-bar.close {
	opacity: 1; }
	.mobile-menu .mobile-header .header-bar.close span:nth-child(1) {
	transform: rotate(-45deg);
	margin-top: -1px; }
	.mobile-menu .mobile-header .header-bar.close span:nth-child(2) {
	opacity: 0; }
	.mobile-menu .mobile-header .header-bar.close span:nth-child(3) {
	transform: rotate(45deg);
	margin-top: -1px; }
	.mobile-menu .mobile-menu {
	position: fixed;
	top: 72px;
	left: 0;
	z-index: 99;
	background: #fff;
	width: 100%;
	transform: scaleY(0);
	transform-origin: top;
	height: 100vh;
	overflow-y: scroll;
	padding: 0 20px;
	padding-bottom: 60px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	@media (min-width: 576px) {
	.mobile-menu .mobile-menu {
	width: 50%;
	transform: scaleX(0);
	transform-origin: left; } }
	.mobile-menu .mobile-menu.open {
	transform: scaleY(1); }
	@media (min-width: 576px) {
	.mobile-menu .mobile-menu.open {
	transform: scaleX(1); } }
	@media (min-width: 1200px) {
	.mobile-menu .mobile-menu.open {
	display: none; } }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner {
	justify-content: center;
	align-items: center;
	padding: 20px 0; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul {
	text-align: center;
	margin: 0;
	padding: 30px 0;
	width: 100%; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li {
	list-style: none;
	padding: 0; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li:last-child > a {
	border-bottom: none; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li a {
	display: block !important;
	padding: 10px 0;
	color: #000000;
	text-transform: capitalize;
	margin: 2px 0;
	text-align: left;
	outline: none;
	font-weight: 500;
	width: 100%;
	border-bottom: 1px solid #ecf0f3; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li a::after {
	right: 0; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li a.active {
	color: #fd4372; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li a.active.dd-icon-down::after,
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li a.active.dd-icon-down::before {
	background: #fd4372; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li ul {
	display: none;
	margin: 0;
	padding: 0; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li ul li {
	padding-left: 20px; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li ul li a {
	margin: 0;
	outline: none;
	font-size: 96%; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li.menu-item-has-children {
	position: relative; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner ul li.menu-item-has-children > a::after {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-weight: 400;
	content: "\ea99" !important;
	font-family: IcoFont !important; }
	.mobile-menu .mobile-menu .mobile-menu-area .mobile-menu-area-inner .social-link-list {
	width: 100%; }
 

Js Structure

We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

  • jquery.js used
  • jquery.counterup.min.js used
  • jquery.easing.js used
  • lightcase.js used
  • jquery.countdown.js used
  • waypoints.min.js used
  • bootstrap.min.js used
  • isotope.pkgd.min.js used
  • wow.min.js used
  • swiper.min.js used
  • functions.js used
  • and some other necessary css files 
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
	
 

	(function($){
	"use strict";

	// Header Section Menu Part
	$("ul li ul").parent("li").addClass("menu-item-has-children");

	// drop down menu width overflow problem fix
	$('ul').parent().on('hover', function() {
	var menu = $(this).find("ul");
	var menupos = $(menu).offset();
	if (menupos.left + menu.width() > $(window).width()) {
	var newpos = -$(menu).width();
	menu.css({ left: newpos });
	}
	});

	// mobile menu responsive
	$(document).on('click','.header-bar',function(){
	$(".header-bar").toggleClass("close");
	$(".mobile-menu").toggleClass("open");
	});

	//mobile drodown menu display
	$('.mobile-menu-area ul li a').on('click', function(e) {
	var element = $(this).parent('li');
	if (element.hasClass('open')) {
	element.removeClass('open');
	element.find('li').removeClass('open');
	element.find('ul').slideUp(1000,"swing");
	}
	else {
	element.addClass('open');
	element.children('ul').slideDown(1000,"swing");
	element.siblings('li').children('ul').slideUp(1000,"swing");
	element.siblings('li').removeClass('open');
	element.siblings('li').find('li').removeClass('open');
	element.siblings('li').find('ul').slideUp(1000,"swing");
	}
	});

	//menu options
	var fixed_top = $(".header-area");
	$(window).on('scroll', function(){

	if( $(this).scrollTop() > 100 ){
	fixed_top.addClass("animated fadeInDown menu-fixed");
	}
	else{
	fixed_top.removeClass("animated fadeInDown menu-fixed");
	}
	});

	// scroll up start here
	$(function(){
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
	if ($(this).scrollTop() > 300) {
	$('.scrollToTop').css({'bottom':'2%', 'opacity':'1','transition':'all .5s ease'});
	} else {
	$('.scrollToTop').css({'bottom':'-30%', 'opacity':'0','transition':'all .5s ease'})
	}
	});
	//Click event to scroll to top
	$('.scrollToTop').on('click', function(){
	$('html, body').animate({scrollTop : 0},500);
	return false;
	});
	});
	
 
 

Credits

jQuery
CSS & Fonts